<template>
	<view class="desk_container">
		<view class="desk_num">
			{{price}}积分
		</view>
		<view class="desk_center">
			<!-- <view style="margin-right: 32rpx;">
				支付剩余时间
			</view>
			<countdown  :endTime="time" /> -->
		</view>
		<view class="desk_select">
			<view class="desk_left">
				<image src="../../static/index/jifen.png" mode=""></image>
				<view class="desk_pay">
					积分支付
				</view>
			</view>
			<view class="desk_right">
				<u-radio-group v-model="value" @change="radioGroupChange">
					<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :disabled="item.disabled"
						active-color="#008573">
					</u-radio>
				</u-radio-group>
			</view>
		</view>
		<view class="desk_footer" @click="pay">
			积分支付{{price}}
		</view>
	</view>
</template>

<script>
	import{pay,orderinfo} from"../../api/product.js"
	import countdown from "@/components/cz-countdown/cz-countdown.vue"
	export default {
		data() {
			return {
				time: "2021-01-28 04:00:00",
				value: '',
				list: [{
					name: '',
					disabled: false
				}],
				id:null,
				price:null
			}
		},
		onLoad(e) {
			this.id=e.id
			this.getinfo()
		},
		components: {
			countdown
		},
		methods: {
			// 订单详情
			async getinfo(){
				let res=await this.post(orderinfo,{
					user_id:uni.getStorageSync("userInfo").id,
					order_id:this.id
				})
				this.price=res.data.total_price
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				// console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			},
			async pay(){
				let res=await this.post(pay,{
					user_id:uni.getStorageSync("userInfo").id,
					order_id:this.id
				})
				this.msg("支付成功")
				setTimeout(()=>{
					uni.navigateTo({
						url:"/pages/order/orderDetail?id="+this.id
					})
				},1500)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.desk_container {
		padding: 0 30rpx;

		.desk_num {
			font-size: 62rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #333333;
			opacity: 1;
			text-align: center;
			margin-top: 40rpx;
		}

		.desk_center {
			display: flex;
			justify-content: center;
			height: 30rpx;
			line-height: 30rpx;
			margin-top: 30rpx;
		}

		.desk_select {
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			width: 690rpx;
			height: 102rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 10rpx rgba(96, 96, 96, 0.14);
			opacity: 1;
			border-radius: 8rpx;
			margin-top: 84rpx;

			.desk_left {
				display: flex;
				justify-content: space-between;
				width: 158rpx;

				image {
					width: 26rpx;
					height: 26rpx;
					margin-top: 38rpx;
				}

				.desk_pay {
					line-height: 102rpx;
				}
			}

			.desk_right {
				margin-top: 32rpx;
			}

		}

		.desk_footer {
			position: fixed;
			bottom: 28rpx;
			width: 690rpx;
			height: 88rpx;
			background: #008573;
			text-align: center;
			line-height: 88rpx;
			opacity: 1;
			border-radius: 44rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			opacity: 1;
		}
	}
</style>
